<script lang="ts" setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	const router = useRouter()
	onReachBottom(() => {
		if (radioShow.value) return
		pageNum.value++
		getRecords()
	})
	let pageNum = ref(1)
	const getRecords = () => {
		proxy.$req('GET', proxy.$api.mineFabuRecord, {
			isSelf: 0,
			memberId: userStoreInfo.userInfo.id,
			pageNo: pageNum.value,
			pageSize: 15
		}).then((res) => {
			let aa = res.result.records.map((item) => {
				if (item.releaseContent.content) {
					item.releaseContent.content = item.releaseContent.content.replace(/\<img/gi,
						'<img style="width:100%;margin:12rpx 0;border-radius:4px;"')
				}
				return item
			})
			listData.value = listData.value.concat(aa)
		})
	}
	getRecords()
	let listData = ref([])
	const unCollect = () => {
		//取消收藏
		proxy.$req('POST', proxy.$api.likeAndCollect, {
			id: item.id,
			moduleType: 3,
			operateType: type,
			userId: userStoreInfo.userInfo.id,
			updateType: way
		}).then((res) => {

		})
	}
	const changeRadio = (id) => {
		let a = radioChecked.value.indexOf(id)
		if (a == -1) {
			radioChecked.value.push(id)
		} else {
			radioChecked.value.splice(a, 1)
		}
		console.log(radioChecked.value);
	}
	let radioShow = ref(false)
	let radioChecked = ref([])
	const radioChange = (evt) => {
		// radioChecked.value = evt.detail.value
		console.log(evt);
		radioChecked.value = evt
		console.log(radioChecked.value);
		if (radioChecked.value.length != listData.value.length) {
			allCheck.value = []
		} else if (radioChecked.value.length == listData.value.length) {
			allCheck.value = ['aa']
		}
	}
	let allCheck = ref([])
	const radioChangeAll = (e) => {
		allCheck.value = e
		console.log(allCheck.value);
		if (allCheck.value.length > 0) {
			//全选
			radioChecked.value = []
			listData.value.forEach((item) => {
				radioChecked.value.push(item.id)
			})
			console.log(radioChecked.value);
		} else {
			//取消全选
			radioChecked.value = []
		}
	}
	const closeCollect = () => {
		if (radioChecked.value.length == 0) {
			uni.$u.toast('请选择')
			return
		}
		modalShow.value = true
	}
	let modalShow = ref(false)
	const modalCon = () => {
		//批量删除
		console.log(radioChecked.value);
		proxy.$req('delete', proxy.$api.deleteTiezi, {
			id: radioChecked.value.join(','),
			memberId: userStoreInfo.userInfo.id
		}).then((res) => {
			uni.$u.toast(res.message)
			if (res.success) {
				modalShow.value = false
				radioChecked.value = []
				allCheck.value = []
				listData.value = []
				pageNum.value = 1
				radioShow.value = false
				getRecords()
			}
		})
	}
</script>
<template>
	<view class="indexHeader">
		<u-navbar :placeholder="true">
			<template #left>
				<view @click="router.back()">
					<u-icon name="arrow-left" size="20"></u-icon>
				</view>
			</template>
			<template #center>
				我的发布
			</template>
			<template #right>
				<view class="" v-if="!radioShow" @click="radioShow=true">
					管理
				</view>
				<view class="" v-if="radioShow" @click="radioShow=false">
					取消
				</view>
			</template>
		</u-navbar>
	</view>
	<view class="containerAll">
		<u-checkbox-group v-model="radioChecked" @change="radioChange">
			<view style="width: 100%;" v-for="(item,index) in listData" :key="index">
				<view class="messageBox">
					<view class="r-flex-center-center">
						<view class="radio" v-show="radioShow">
							<u-checkbox shape="circle" activeColor="#CB645E" :name="item.id"></u-checkbox>
						</view>
						<view class="mbUser" @click="changeRadio(item.id)">
							<image class="mbuAvatar" :src="item.releaseContent.memberAvatar" mode=""></image>
							<view class="mbuInfo">
								<text>{{ item.releaseContent.memberNickName }}</text>
								<text>{{ item.releaseContent.updateTime }}</text>
							</view>
						</view>
					</view>
					<view class="mbContent">
						<view class="mbcTit">
							<u-parse :content="item.releaseContent.content"></u-parse>
						</view>
					</view>
				</view>
			</view>
		</u-checkbox-group>
	</view>
	<view class="" style="margin-top: 150rpx;" v-if="listData.length<1">
		<u-empty mode="list">
		</u-empty>
	</view>
	<view class="fixedEle " v-if="radioShow">
		<u-checkbox-group v-model="allCheck" @change="radioChangeAll">
			<view class="r-flex-between-center" style="width: 100%;height: 100rpx;">
				<view class="r-flex-center-center">
					<u-checkbox shape="circle" activeColor="#CB645E" name="aa"></u-checkbox>
					<text>全选</text>
				</view>
				<view class="eleBtn" @click="closeCollect">
					删除帖子
				</view>
			</view>
		</u-checkbox-group>
	</view>
	<u-modal :show="modalShow" title="" :showConfirmButton="false" width="540rpx">
		<view class="c-flex-start-center" style="height: 300rpx;width: 100%;">
			<text style="font-size: 40rpx;
font-weight: 600;
color: #000000;margin-bottom: 32rpx;margin-top: 32rpx;">提示</text>
			<text style="font-size: 28rpx;
font-weight: 400;
color: rgba(0,0,0,0.45);margin-bottom: 48rpx;">确定要删除吗</text>
			<view class="r-flex-center-center">
				<view style="width: 206rpx;height: 88rpx;
background: rgba(255,255,255,0);
border: 2rpx solid #CB645E;font-size: 32rpx;
font-weight: 500;
color: #CB645E;
text-align: center;
line-height: 88rpx;
border-radius: 16rpx;" @click="modalShow=false">
					取消
				</view>
				<view style="width: 32rpx;height: 1rpx;">

				</view>
				<view style="width: 206rpx;
height: 88rpx;
background: #CB645E;font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;text-align: center;
line-height: 88rpx;
border-radius: 16rpx;" @click="modalCon()">
					确定
				</view>
			</view>
		</view>
	</u-modal>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA !important;
	}

	view {
		box-sizing: border-box;
	}

	.indexHeader {
		width: 100%;

		.searchEle {
			width: 686rpx;
			margin: 10rpx auto 0;
			height: 76rpx;
			display: flex;
			align-items: center;
		}
	}

	.containerAll {
		width: 100%;
		padding: 0 0 150rpx 0;
	}

	.messageBox {
		width: 686rpx;
		margin: 30rpx auto;
		padding: 32rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.mbUser {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;

			.mbuAvatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}

			.mbuInfo {
				margin-left: 20rpx;
				width: 500rpx;
				height: 70rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;

				text:nth-child(1) {
					font-size: 28rpx;
				}

				text:nth-child(2) {
					font-size: 20rpx;
					color: rgba(0, 0, 0, 0.45);
				}
			}
		}

		.mbContent {
			width: 100%;

			.mbcTit {
				margin: 28rpx 0;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.85);
			}
		}
	}

	.fixedEle {
		width: 100%;
		height: 100rpx;
		padding: 0 32rpx;
		background-color: #fff;
		border-top: 1rpx solid #e7e7e7;
		position: fixed;
		bottom: 0;

		.eleBtn {
			width: 196rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 0);
			border-radius: 12rpx;
			border: 2rpx solid #CB645E;
			font-size: 28rpx;
			font-weight: 400;
			color: #CB645E;
			text-align: center;
			line-height: 64rpx;
		}
	}
</style>